<template>
	<view class="layout">
		<view class="title">
			<view class="big-title">
				<view v-if="currentModel">
					验证码登录
				</view>
				<view v-else>
					手机号登录
				</view>

			</view>
			<view class="tips">
				未注册的手机号登录成功之后将会自动注册
			</view>
		</view>
		<view class="inner">
			<view class="form">
				<uv-form :model="form" labelPosition="left" labelAlign="left" labelWidth="60" :rules="rules"
					ref="uuForm">
					<uv-form-item label="手机号" prop="phone" borderBottom>
						<uv-input v-model="form.phone" type="number" maxlength="11" clearable="true"
							placeholder="请输入手机号" border="none">
						</uv-input>
					</uv-form-item>

					<uv-form-item v-if="model==='code'" prop="code" label="验证码" borderBottom>
						<uv-input v-model="form.code" type="number" maxlength="6" clearable="true" placeholder="验证码"
							border="none">
							<template v-slot:suffix>
								<uv-code ref="uuCode" @start="startCode" @end="endCode" @change="codeChange"
									seconds="60" changeText="重新发送(X秒)" keepRunning="true"
									unique-key="uv-code-un-refersh-phone"></uv-code>
								<uv-button @click="getCode" type="primary" :plain="true" :hairline="true"
									:disabled="!canGetCode" size="mini">{{tips}}</uv-button>
							</template>
						</uv-input>
					</uv-form-item>
					<uv-form-item v-if="model==='password'" prop="password" label="密码" borderBottom>
						<uv-input v-model="form.password" type="password" maxlength="18" password="true"
							clearable="true" placeholder="请输入密码" border="none">
						</uv-input>
					</uv-form-item>
				</uv-form>
			</view>
			<view class="tools">
				<view class="change" @click="changeModel">
					<view v-if="currentModel">
						密码登录
					</view>
					<view v-else>
						验证码登录
					</view>
				</view>
				<view class="forget" @click="forgetPassword">
					忘记密码？
				</view>
			</view>
			<view class="button">
				<uv-button text="登录" type="primary" :custom-style="customButtonStyle" @click="login"></uv-button>
			</view>

		</view>
		<view class="other">
			<uv-divider class="divider" text="其他方式登录"></uv-divider>
			<uv-grid col="3" :border="false">
				<uv-grid-item>
					<svg t="1726747754356" class="icon" viewBox="0 0 1024 1024" version="1.1"
						xmlns="http://www.w3.org/2000/svg" p-id="5352" width="30" height="30">
						<path
							d="M683.058 364.695c11 0 22 1.016 32.943 1.976C686.564 230.064 538.896 128 370.681 128c-188.104 0.66-342.237 127.793-342.237 289.226 0 93.068 51.379 169.827 136.725 229.256L130.72 748.43l119.796-59.368c42.918 8.395 77.37 16.79 119.742 16.79 11 0 21.46-0.48 31.914-1.442a259.168 259.168 0 0 1-10.455-71.358c0.485-148.002 128.744-268.297 291.403-268.297l-0.06-0.06z m-184.113-91.992c25.99 0 42.913 16.79 42.913 42.575 0 25.188-16.923 42.579-42.913 42.579-25.45 0-51.38-16.85-51.38-42.58 0-25.784 25.93-42.574 51.38-42.574z m-239.544 85.154c-25.384 0-51.374-16.85-51.374-42.58 0-25.784 25.99-42.574 51.374-42.574 25.45 0 42.918 16.79 42.918 42.575 0 25.188-16.924 42.579-42.918 42.579z m736.155 271.655c0-135.647-136.725-246.527-290.983-246.527-162.655 0-290.918 110.88-290.918 246.527 0 136.128 128.263 246.587 290.918 246.587 33.972 0 68.423-8.395 102.818-16.85l93.809 50.973-25.93-84.677c68.907-51.93 120.286-119.815 120.286-196.033z m-385.275-42.58c-16.923 0-34.452-16.79-34.452-34.179 0-16.79 17.529-34.18 34.452-34.18 25.99 0 42.918 16.85 42.918 34.18 0 17.39-16.928 34.18-42.918 34.18z m188.165 0c-16.984 0-33.972-16.79-33.972-34.179 0-16.79 16.927-34.18 33.972-34.18 25.93 0 42.913 16.85 42.913 34.18 0 17.39-16.983 34.18-42.913 34.18z"
							fill="#09BB07" p-id="5353"></path>
					</svg>
					<text class="grid-text">微信</text>
				</uv-grid-item>
				<uv-grid-item>
					<svg t="1726747891647" class="icon" viewBox="0 0 1024 1024" version="1.1"
						xmlns="http://www.w3.org/2000/svg" p-id="9105" width="30" height="30">
						<path
							d="M511.09761 957.257c-80.159 0-153.737-25.019-201.11-62.386-24.057 6.702-54.831 17.489-74.252 30.864-16.617 11.439-14.546 23.106-11.55 27.816 13.15 20.689 225.583 13.211 286.912 6.767v-3.061z"
							fill="#FAAD08" p-id="9106"></path>
						<path
							d="M496.65061 957.257c80.157 0 153.737-25.019 201.11-62.386 24.057 6.702 54.83 17.489 74.253 30.864 16.616 11.439 14.543 23.106 11.55 27.816-13.15 20.689-225.584 13.211-286.914 6.767v-3.061z"
							fill="#FAAD08" p-id="9107"></path>
						<path
							d="M497.12861 474.524c131.934-0.876 237.669-25.783 273.497-35.34 8.541-2.28 13.11-6.364 13.11-6.364 0.03-1.172 0.542-20.952 0.542-31.155C784.27761 229.833 701.12561 57.173 496.64061 57.162 292.15661 57.173 209.00061 229.832 209.00061 401.665c0 10.203 0.516 29.983 0.547 31.155 0 0 3.717 3.821 10.529 5.67 33.078 8.98 140.803 35.139 276.08 36.034h0.972z"
							fill="#000000" p-id="9108"></path>
						<path
							d="M860.28261 619.782c-8.12-26.086-19.204-56.506-30.427-85.72 0 0-6.456-0.795-9.718 0.148-100.71 29.205-222.773 47.818-315.792 46.695h-0.962C410.88561 582.017 289.65061 563.617 189.27961 534.698 185.44461 533.595 177.87261 534.063 177.87261 534.063 166.64961 563.276 155.56661 593.696 147.44761 619.782 108.72961 744.168 121.27261 795.644 130.82461 796.798c20.496 2.474 79.78-93.637 79.78-93.637 0 97.66 88.324 247.617 290.576 248.996a718.01 718.01 0 0 1 5.367 0C708.80161 950.778 797.12261 800.822 797.12261 703.162c0 0 59.284 96.111 79.783 93.637 9.55-1.154 22.093-52.63-16.623-177.017"
							fill="#000000" p-id="9109"></path>
						<path
							d="M434.38261 316.917c-27.9 1.24-51.745-30.106-53.24-69.956-1.518-39.877 19.858-73.207 47.764-74.454 27.875-1.224 51.703 30.109 53.218 69.974 1.527 39.877-19.853 73.2-47.742 74.436m206.67-69.956c-1.494 39.85-25.34 71.194-53.24 69.956-27.888-1.238-49.269-34.559-47.742-74.435 1.513-39.868 25.341-71.201 53.216-69.974 27.909 1.247 49.285 34.576 47.767 74.453"
							fill="#FFFFFF" p-id="9110"></path>
						<path
							d="M683.94261 368.627c-7.323-17.609-81.062-37.227-172.353-37.227h-0.98c-91.29 0-165.031 19.618-172.352 37.227a6.244 6.244 0 0 0-0.535 2.505c0 1.269 0.393 2.414 1.006 3.386 6.168 9.765 88.054 58.018 171.882 58.018h0.98c83.827 0 165.71-48.25 171.881-58.016a6.352 6.352 0 0 0 1.002-3.395c0-0.897-0.2-1.736-0.531-2.498"
							fill="#FAAD08" p-id="9111"></path>
						<path
							d="M467.63161 256.377c1.26 15.886-7.377 30-19.266 31.542-11.907 1.544-22.569-10.083-23.836-25.978-1.243-15.895 7.381-30.008 19.25-31.538 11.927-1.549 22.607 10.088 23.852 25.974m73.097 7.935c2.533-4.118 19.827-25.77 55.62-17.886 9.401 2.07 13.75 5.116 14.668 6.316 1.355 1.77 1.726 4.29 0.352 7.684-2.722 6.725-8.338 6.542-11.454 5.226-2.01-0.85-26.94-15.889-49.905 6.553-1.579 1.545-4.405 2.074-7.085 0.242-2.678-1.834-3.786-5.553-2.196-8.135"
							fill="#000000" p-id="9112"></path>
						<path
							d="M504.33261 584.495h-0.967c-63.568 0.752-140.646-7.504-215.286-21.92-6.391 36.262-10.25 81.838-6.936 136.196 8.37 137.384 91.62 223.736 220.118 224.996H506.48461c128.498-1.26 211.748-87.612 220.12-224.996 3.314-54.362-0.547-99.938-6.94-136.203-74.654 14.423-151.745 22.684-215.332 21.927"
							fill="#FFFFFF" p-id="9113"></path>
						<path
							d="M323.27461 577.016v137.468s64.957 12.705 130.031 3.91V591.59c-41.225-2.262-85.688-7.304-130.031-14.574"
							fill="#EB1C26" p-id="9114"></path>
						<path
							d="M788.09761 432.536s-121.98 40.387-283.743 41.539h-0.962c-161.497-1.147-283.328-41.401-283.744-41.539l-40.854 106.952c102.186 32.31 228.837 53.135 324.598 51.926l0.96-0.002c95.768 1.216 222.4-19.61 324.6-51.924l-40.855-106.952z"
							fill="#EB1C26" p-id="9115"></path>
					</svg>
					<text class="grid-text">QQ</text>
				</uv-grid-item>
				<uv-grid-item>
					<svg t="1726747915569" class="icon" viewBox="0 0 1024 1024" version="1.1"
						xmlns="http://www.w3.org/2000/svg" p-id="10196" width="30" height="30">
						<path
							d="M851.4 590.193c-22.196-66.233-90.385-90.422-105.912-91.863-15.523-1.442-29.593-9.94-19.295-27.505 10.302-17.566 29.304-68.684-7.248-104.681-36.564-36.14-116.512-22.462-173.094 0.866-56.434 23.327-53.39 7.055-51.65-8.925 1.89-16.848 32.355-111.02-60.791-122.395C311.395 220.86 154.85 370.754 99.572 457.15 16 587.607 29.208 675.873 29.208 675.873h0.58c10.009 121.819 190.787 218.869 412.328 218.869 190.5 0 350.961-71.853 398.402-169.478 0 0 0.143-0.433 0.575-1.156 4.938-10.506 8.71-21.168 11.035-32.254 6.668-26.205 11.755-64.215-0.728-101.66z m-436.7 251.27c-157.71 0-285.674-84.095-285.674-187.768 0-103.671 127.82-187.76 285.674-187.76 157.705 0 285.673 84.089 285.673 187.76 0 103.815-127.968 187.768-285.673 187.768z"
							fill="#E71F19" p-id="10197"></path>
						<path
							d="M803.096 425.327c2.896 1.298 5.945 1.869 8.994 1.869 8.993 0 17.7-5.328 21.323-14.112 5.95-13.964 8.993-28.793 8.993-44.205 0-62.488-51.208-113.321-114.181-113.321-15.379 0-30.32 3.022-44.396 8.926-11.755 4.896-17.263 18.432-12.335 30.24 4.933 11.662 18.572 17.134 30.465 12.238 8.419-3.46 17.268-5.33 26.41-5.33 37.431 0 67.752 30.241 67.752 67.247 0 9.068-1.735 17.857-5.369 26.202a22.832 22.832 0 0 0 12.335 30.236l0.01 0.01z"
							fill="#F5AA15" p-id="10198"></path>
						<path
							d="M726.922 114.157c-25.969 0-51.65 3.744-76.315 10.942-18.423 5.472-28.868 24.622-23.5 42.91 5.509 18.29 24.804 28.657 43.237 23.329a201.888 201.888 0 0 1 56.578-8.064c109.253 0 198.189 88.271 198.189 196.696 0 19.436-2.905 38.729-8.419 57.16-5.508 18.289 4.79 37.588 23.212 43.053 3.342 1.014 6.817 1.442 10.159 1.442 14.943 0 28.725-9.648 33.37-24.48 7.547-24.906 11.462-50.826 11.462-77.175-0.143-146.588-120.278-265.813-267.973-265.813z"
							fill="#F5AA15" p-id="10199"></path>
						<path
							d="M388.294 534.47c-84.151 0-152.34 59.178-152.34 132.334 0 73.141 68.189 132.328 152.34 132.328 84.148 0 152.337-59.182 152.337-132.328 0-73.15-68.19-132.334-152.337-132.334zM338.53 752.763c-29.454 0-53.39-23.755-53.39-52.987 0-29.228 23.941-52.989 53.39-52.989 29.453 0 53.39 23.76 53.39 52.989 0 29.227-23.937 52.987-53.39 52.987z m99.82-95.465c-6.382 11.086-19.296 15.696-28.726 10.219-9.43-5.323-11.75-18.717-5.37-29.803 6.386-11.09 19.297-15.7 28.725-10.224 9.43 5.472 11.755 18.864 5.37 29.808z"
							fill="#040000" p-id="10200"></path>
					</svg>
					<text class="grid-text">微博</text>
				</uv-grid-item>
			</uv-grid>
		</view>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref,
		computed
	} from 'vue';
	import {
		apiGetLoginCode,
		apiLoginByCode,
		apiLoginByPassword
	} from "@/urls/user/index.js";
	import {
		setToken
	} from '../../utils/AuthUtils';
	const model = ref("code");
	const currentModel = computed(() => {
		return model.value === 'code';
	})
	const uuForm = ref();
	const form = ref({
		phone: "17306963430",
		password: "",
		code: undefined
	});

	const rules = {
		'code': {
			type: 'number',
			required: true,
			len: 6,
			message: '请填写6位验证码',
			trigger: ['blur']
		},
		'password': {
			type: 'string',
			required: true,
			message: '密码不能为空',
			trigger: ['blur']
		},
		'phone': {
			type: 'string',
			required: true,
			message: "请填写11位手机号",
			trigger: ['blur'],
			len: 11
		},
	}

	const customButtonStyle = {
		borderRadius: '35rpx' //圆角
	}
	const changeModel = () => {
		console.log(currentModel.value);
		if (currentModel.value) {
			model.value = 'password';
		} else {
			model.value = 'code';
		}
	}
	const uuCode = ref();
	const tips = ref("发送验证码");
	const canGetCode = ref(true);
	const startCode = () => {
		canGetCode.value = false;
	}
	const endCode = () => {
		canGetCode.value = true;
	}
	const codeChange = (text) => {
		tips.value = text;
	}
	const getCode = () => {
		console.log("向后端请求验证码");
		if (uuCode.value.canGetCode) {
			uni.showLoading({
				title: '正在获取验证码'
			})
			// 向后端请求验证码
			apiGetLoginCode(form.value.phone)
				.then(result => {
					uni.hideLoading();
					uni.showToast({
						icon: "none",
						title: '获取验证码成功'
					})
					// 通知验证码组件内部开始倒计时
					uuCode.value.start();
				})
				.finally(()=>{
					uni.hideLoading();
				})
		} else {
			uni.showToast({
				icon: "none",
				title: '验证码发送频繁，请稍后重试'
			})
		}
	}

	const login = () => {
		uuForm.value.validate().then(() => {
			const {
				phone,
				code
			} = form.value;
			// 判断验证码登录或密码登录
			switch (model.value) {
				case 'code':
					apiLoginByCode(phone, code)
						.then((result) => {
							const {
								token
							} = result.data;
							// 保存token到本地
							setToken(token);
							uni.showToast({
								title: "登录成功",
								icon: "none"
							})
							// 登录成功回到首页
							uni.reLaunch({
								url: `/pages/home/home`,
							});
						})
					break
				case 'password':
					// todo 通过手机号+密码登录
					break
			}
		})
	}
	const forgetPassword = () => {
		console.log("忘记密码");
	}
</script>

<style lang="scss" scoped>
	.fade-enter-active,
	.fade-leave-active {
		transition: opacity 2s;
	}

	.fade-enter,
	.fade-leave-to {
		opacity: 0;
	}

	.fade-leave,
	.fade-enter-to {
		opacity: 1;
	}

	.layout {
		padding: 30rpx;
		display: flex;
		flex-flow: column;
		height: 100vh;
		justify-content: space-between;

		.title {
			display: flex;
			justify-content: center;
			flex-flow: column;
			align-items: center;
			// padding: 50rpx 0 200rpx 0;
			flex: 10;

			.big-title {
				font-size: 55rpx;
				line-height: 100rpx;
			}

			.tips {
				color: $uni-text-color-grey;
				font-size: 24rpx;
			}
		}

		.inner {
			flex: 8;
			padding: 30rpx;

			.form {
				::v-deep .uv-form-item {
					font-size: 24rpx;
				}
			}

			.tools {
				display: flex;
				justify-content: space-between;
				color: $uni-text-color-grey;
				padding: 10rpx 0 100rpx 0;

				.change {
					font-size: 24rpx;
				}

				.forget {
					font-size: 24rpx;
				}
			}
		}

		.other {
			flex: 10;

			.grid-text {
				font-size: 24rpx;
				line-height: 50rpx;
			}
		}
	}

	::v-deep .uv-divider__text {
		font-size: 24rpx !important;
		padding: 20rpx 0;
	}
</style>